<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>


</head>
<body>
<div id="app">
    <form>
        订单号：<input type="text" name="outTradeNo" v-model="alipayBean.out_trade_no"><br/>
        商品名称：<input type="text" name="subject" v-model="alipayBean.subject"><br/>
        商品价格：<input type="text" name="total_amount" v-model="alipayBean.total_amount"><br/>
        商品描述：<input type="text" name="body" v-model="alipayBean.body"><br/>
        <button type="button" @click="goapply">去支付</button>
    </form>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            alipayBean:{
                out_trade_no:"",
                subject:"",
                total_amount:0,
                body:"",
            }


        },
        methods:{
            goapply:function () {
                console.log("Qs.stringify"+Qs)
                var ab=Qs.stringify(this.alipayBean);
                axios.post('http://localhost:8086/qst_springbootvue20220217/order/alipay',ab).then(resp => {
                    // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
                    const divForm = document.getElementsByTagName('div')
                    if (divForm.length) {
                        document.body.removeChild(divForm[0])
                    }
                    const div = document.createElement('div')
                    div.innerHTML = resp.data // data就是接口返回的form 表单字符串
                    document.body.appendChild(div)
                    document.forms[0].setAttribute('target', '_blank') // 新开窗口跳转
                    document.forms[0].submit()
                })

            }

        }

    })




</script>

</body>
</html>